<template>
	<view class="mineLayOut">
		<view class="nav">
			<view class="name">我的</view>
		</view>
		<view class="content">
			<view class="pic">
				<image src="@/static/images/mine/avatar.png" mode="aspectFill"></image>
			</view>
			<view class="row">
				<view class="title">姓名</view>
				<view class="text">JiangXiaoDu</view>
			</view>
			<view class="row">
				<view class="title">项目地址</view>
				<view class="text">gitee.com/xiaodujiang</view>
			</view>
			<view class="row">
				<view class="title">邮箱</view>
				<view class="text">283996718@qq.com</view>
			</view>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
	.mineLayOut {
		.nav {
			height: 420rpx;
			background: linear-gradient(223.87deg, rgba(131, 210, 246, 1) 0%, rgba(73, 158, 236, 1) 100%);
			box-shadow: 0px 4px 16px -4px rgba(132, 210, 247, 1);
			
			.name {
				color: white;
				font-size: 32rpx;
				letter-spacing: 10rpx;
				text-align: center;
				padding-top: 88rpx;
			}
		}
		
		.content {
			position: absolute;
			width: 686rpx;
			height: 620rpx;
			left: 50%;
			transform: translateX(-50%);
			top: 168rpx;
			border-radius: 5px;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 4px 16px  rgba(239, 245, 255, 1);
			padding: 48rpx 32rpx;
			
			.pic {
				height: 128rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 64rpx;
				
				image {
					width: 128rpx;
					height: 128rpx;
					border-radius: 50%;
				}
			}
			
			.row {
				height: 92rpx;
				border-radius: 3px;
				border: 1px solid rgb(216, 216, 216);
				padding: 16rpx 24rpx;
				display: flex;
				flex-direction: column;
				margin-bottom: 24rpx;
				
				.title {
					font-size: 22rpx;
					line-height: 20rpx;
					color: rgba(138, 138, 138, 1);
					margin-bottom: 5rpx;
				}
				
				.text {
					font-size: 28rpx;
					color: rgba(28, 28, 28, 1);
				}
				
			}
		}
	}
</style>
